
import React,{Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    SectionList,
    Image,
    TouchableOpacity
} from 'react-native';
import{BaseStyle,demension} from "../Style/BaseStyle";
import Svg from "./Svg";
export default class DataListSection extends Component{
    constructor(props) {
        super(props);
        this.state={
            listType:'threeColumn'
        }
    }
    render(){
        return(
            <View style={BaseStyle.padVertical10}>
                <SectionList
                    renderSectionHeader={this.renderHeader} //区头
                    renderItem={({item,index,section})=>this.renderItems(item,section)}
                    sections={this.props.sections}     //数据源
                    keyExtractor={(item, index) => item + index}
                />
            </View>
        )
    }
    renderHeader=(item)=>{
        const {hasHeader,goMore}=this.props,vm=this;
        const color=item.section.color?item.section.color:"#333";
        const {listType,isMore}=item.section;
        return(
         hasHeader ? (
             <View>
                 {listType !=='list' ? this.renderHeight(listType):null}
                 <View style={styles.headerStyle}>
                     <Text style={{color:color}}>
                         {item.section.key}
                     </Text>
                     <TouchableOpacity style={[BaseStyle.flexCommon,{display:isMore ? 'flex':'none'}]} onPress={(item)=>{
                         goMore && goMore(item)
                     }}>
                         <Text style={{color:color}}>更多</Text>
                         {isMore ? <Svg icon="arrow" size={12} color={color}/>:null}
                     </TouchableOpacity>
                 </View>
             </View>

            ) :null
        )
    }
    renderItems=(item,section)=>{
        const {listType}=section;

        return listType === 'list' ? this.renderList(item,section):this.renderZoom(item,section);
    }

    renderList(item){
        const {shopCart,goDescription, productName, imageSource, productDesc,prices,member}=this.props;

        return(
            item.map((it,idx)=>{
                return(
                    <View>
                     <TouchableOpacity onPress={(it)=>goDescription && goDescription(it)} key={idx}
                                  style={BaseStyle.flexStart}>
                        <Image source={it[imageSource]} style={BaseStyle.listWidth}/>
                        <View style={styles.listRight}>
                            <Text style={styles.productStyle}>{it[productName]}</Text>
                            <Text style={styles.descStyle}>{it[productDesc]}</Text>
                            <Text style={styles.priceStyle}>{it[prices]}</Text>
                            <View>
                                <Text>{it[member]}</Text>
                            </View>

                        </View>

                    </TouchableOpacity>
                        {this.renderLine(idx)}
                    </View>
                )
            })


        )
    }
    renderZoom(item,section){
        const {goDescription, imageSource,productName, productDesc,prices}=this.props;
        const listType=section.listType,isMoreThanOne=listType !=='oneColumn';

        return(
            <View style={isMoreThanOne ? BaseStyle.flexCommon:null}>
                {
                    item.map((it,idx)=>{
                        return(
                            <TouchableOpacity key={idx}
                                              onPress={(it)=>goDescription && goDescription(it)}
                                              style={[isMoreThanOne ? BaseStyle.flexColumn : BaseStyle.flexColumnStart,
                                                  {width:BaseStyle[listType].width}]}>
                                <Image source={it[imageSource]} style={BaseStyle[listType]} />
                                <Text style={styles.productStyle}>{it[productName]}</Text>
                                <Text style={{
                                    display:it[productDesc] ? 'flex' :'none'
                                }}>{it[productDesc]}</Text>
                                <Text style={styles.priceStyle}>{it[prices]}</Text>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )


    }

    renderLine(idx){
        return(<View style={BaseStyle.separatorOne} key={idx}></View>)
    }
    renderHeight(listType){
        return (
            <View style={BaseStyle.separator12} key={listType+'1'}></View>
        )
    }
}
const styles=StyleSheet.create({
    headerStyle:{
        ...BaseStyle.flexCommon,
        ...BaseStyle.padVertical10
    },
    priceStyle:{
        ...BaseStyle.textLineHeight,
        ...BaseStyle.prices
    },
    descStyle:{
        ...BaseStyle.textLineHeight,
        ...BaseStyle.descriptionStyle
    },
    productStyle:{
        ...BaseStyle.textLineHeight,
        color:"#333"
    },
    listRight:{
        marginLeft:10
    },
    listProductStyle:{
        ...BaseStyle.txtLineHeight24,
        color:"#333"
    },
    listDescStyle:{
        ...BaseStyle.txtLineHeight24,
        ...BaseStyle.descriptionStyle
    }
})
